<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .first-list {
            width: 600px;
            height: 44px;
            line-height: 44px;
            background: #0b97c4;
        }
        
        .first-list>li {
            float: left;
            width: 150px;
            text-align: center;
        }
        
        .first-list>li:hover {
            background: red;
        }
        
        .second-list {
            display: none;
        }
        
        .second-list>li {
            width: 150px;
            background: #ccc;
        }
    </style>
</head>

<body>
    <ul class="first-list">
        <li>视频教程
            <ul class="second-list">
                <li>java视频</li>
                <li>设计师视频</li>
                <li>前端视频</li>
                <li>移动端开发视频</li>
            </ul>
        </li>
        <li>经典教材
            <ul class="second-list">
                <li>大学语文</li>
                <li>恋爱真经</li>
                <li>变帅秘诀99招</li>
                <li>唐诗三百首</li>
            </ul>
        </li>
        <li>合作交流
            <ul class="second-list">
                <li>登月计划</li>
                <li>欧洲访问</li>
            </ul>
        </li>
        <li>联系我们
            <ul class="second-list">
                <li>电话联系</li>
                <li>微信联系</li>
                <li>QQ联系</li>
                <li>登门拜访</li>
            </ul>
        </li>
    </ul>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        /* 需求：当鼠标移入当li标签的时候展开二级菜单，当鼠标移开的时候要收起二级菜单 */
        /* 001-先给一级标签添加鼠标移入事件*/

        /* 方案01 */
        // $(".first-list > li").mouseenter(function() {
        //     $(this).children(".second-list").slideDown(1000);
        // });

        // $(".first-list > li").mouseleave(function() {
        //     $(this).children(".second-list").slideUp(1000);
        // })

        /* 方案02 */
        // $(".first-list > li").hover(function() {
        //     $(this).children(".second-list").slideDown(1000);
        // }, function() {
        //     $(this).children(".second-list").slideUp(1000);
        // });

        /* 方案03 */
        $(".first-list > li").hover(function() {
            $(this).children(".second-list").stop().slideToggle(1000);
        })

        /* bug: 当鼠标在短时间快速的移入移除，那么就会有问题 */
        /* 原因: 动画执行需要时间，如果我们快速的移入移除，每次都会触发hover,该方法会触发很多次，每次触发的时候都会执行动画 */
        /* 如果有很多动画，那么这些动画只能一个接着一个的执行，不能一起执行。 */
        /* 当有很多动画要执行的时候，这些动画会被放到一个队列的数据结构中，依次执行。 */

        /* 数据结构：队列(先进先出) + 栈(先进后出) */
    </script>
</body>

</html>